<script lang="jsx" setup>
import dayjs from 'dayjs';
import { nextTick, ref } from 'vue';
import useResetTableRef from '@/hooks/common/resetTableRef';

const commonSearchRef = ref(null);
const [searchParams, resetSearchParams] = useResetTableRef({
  moduleNo: null
});

const stateMap = {
  0: '新录入',
  1: '更改',
  2: '待处理',
  3: '处理中',
  4: '暂停',
  5: '拒审',
  6: '反审核',
  7: '审核中',
  8: '生效',
  9: '完成',
  10: '取消',
  11: '外部ECN',
  12: '外部ECN处理中',
  13: '内部ECN处',
  19: '样板转生产',
  21: '改变',
  22: '待投料',
  23: '已投料'
};

function formatStatePO(v) {
  return stateMap[v] || '';
}

function formatStatePOColor(v) {
  switch (Number(v)) {
    case 0:
      return '#0080FF';
    case 1:
      return '#E1E100';
    case 2:
      return '#FF8000';
    case 3:
      return '#B15BFF';
    case 4:
      return '#73BF00';
    case 5:
      return '#8E8E8E';
    case 6:
      return '#BEBEBE';
    case 7:
      return '#FF0000';
    case 8:
      return '#BEBEBE';
    case 9:
      return '#0000FF';
    case 10:
      return '#007500';
    case 21:
      return '#FF4500';
    default:
      return '#0000FF';
  }
}

const formList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '生产型号',
    span: 9,
    placeholder: '请输入生产型号'
  }
];

const leftTableRef = ref(null);
const leftColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'state',
    dataIndex: 'state',
    title: '状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 70,
    customRender: ({ record }) => {
      return (
        <div style={{ color: formatStatePOColor(Number(record.ppcState)) }} class="h-full w-full font-800">
          {formatStatePO(Number(record.state))}
        </div>
      );
    }
  },

  {
    key: 'issueNo',
    dataIndex: 'issueNo',
    title: '投料单号',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },

  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return <div class="fonw-800 color-#646cff">{record.moduleNo}</div>;
    }
  },
  {
    key: 'issueType',
    dataIndex: 'issueType',
    title: '发料类型',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'issPcsQty',
    dataIndex: 'issPcsQty',
    title: 'PNL数',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '发料日期',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.createDate && dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'workType',
    dataIndex: 'workType',
    title: '工单类型',
    width: 120,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'sheetQty',
    dataIndex: 'sheetQty',
    title: '大料数量',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '发料人员',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function search() {
  leftTableRef.value.getData();
}

function reset() {
  resetSearchParams();
  nextTick(() => {
    search();
  });
}

const rightColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: '批卡号',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    width: 160,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return <div class="fonw-800 color-#646cff">{record.moduleNo}</div>;
    }
  },
  {
    key: 'dateCode',
    dataIndex: 'dateCode',
    title: '生产周期',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'prodOrderNo',
    dataIndex: 'prodOrderNo',
    title: '工单号码',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'scrapCharacteristic',
    dataIndex: 'scrapCharacteristic',
    title: '报废特性',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '批卡数量',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '批卡单位',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'planDays',
    dataIndex: 'planDays',
    title: '计划生产天数',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'workDays',
    dataIndex: 'workDays',
    title: '生产时长',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '入账员',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建日期',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.createDate && dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '最后更改日期',
    width: 170,
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.updateDate && dayjs(record.updateDate).format('YYYY-MM-DD HH:mm:ss');
    }
  }
];
const rightSearchParams = ref({
  issueId: null
});
const rightTableRef = ref(null);
function handleTableRowClick(row) {
  rightSearchParams.value.issueId = row.issueId;
  nextTick(() => rightTableRef.value.getData());
}

function handleTableLoadSuccess(data) {
  if (!data.length) return;
  leftTableRef.value.setCurrentRowId(data[0]);
  handleTableRowClick(data[0]);
}
</script>

<template>
  <div class="h-full w-full">
    <ARow :gutter="16" class="h-full">
      <ACol :span="12" class="h-full min-h-500px w-430px flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
        <CommonSearch
          ref="commonSearchRef"
          v-model:searchParams="searchParams"
          :form-list="formList"
          @search="search"
          @reset="reset"
        ></CommonSearch>
        <Table
          ref="leftTableRef"
          v-model:searchParams="searchParams"
          :column="leftColumn"
          :show-row-selection="false"
          auto-generate-uuid
          row-key="screenId"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          class="h-full"
          url="/mes/BasePpcprodissue/select"
          @table-row-click="handleTableRowClick"
          @table-data-load-sucess="handleTableLoadSuccess"
        >
          <template #title>
            <span class="color-#646cff">生产工单</span>
          </template>
        </Table>
      </ACol>
      <ACol :span="12" class="h-full">
        <Table
          ref="rightTableRef"
          v-model:searchParams="rightSearchParams"
          :column="rightColumn"
          :show-row-selection="false"
          auto-generate-uuid
          row-key="screenId"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          class="h-full"
          :is-pagination="false"
          url="/mes/BasePpclotcard/select"
        ></Table>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped></style>
